@extends('layouts.appManager')

@section('content')
    <input type="hidden" id="serverId" value="{{$server->id}}">
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-12">
                <div class="card panel mb-4">
                    <div class="card-header">游戏视频</div>

                    <div class="card-body ">
                        <div class="text-right">
                            <el-button type="success" size="small" @click="addShow()">添加</el-button>
                        </div>

                        <el-table
                                :data="tableData"
                                style="width: 100%">
                            <el-table-column
                                    prop="title"
                                    label="名称">
                            </el-table-column>
                            <el-table-column
                                    prop="sort"
                                    label="序号">
                            </el-table-column>
                            {{--<el-table-column
                                    label="状态">
                                <template slot-scope="scope">
                                    <el-switch
                                            v-model="scope.row.status"
                                            active-color="#13ce66"
                                            inactive-color="#ff4949"
                                            :active-value="1"
                                            :inactive-value="0"
                                            @change="change(scope.row)">
                                    </el-switch>
                                </template>
                            </el-table-column>--}}
                            <el-table-column
                                    label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="primary" @click="edit(scope.row)">编辑</el-button>
                                    <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <el-dialog v-if="curItem" title="添加视频" :show-close="false" :visible.sync="dialog" :close-on-click-modal="false">
        <el-form label-width="80px" >
            <el-form-item label="视频名称">
                <el-input v-model="curItem.title"></el-input>
            </el-form-item>
            <el-form-item label="视频序号">
                <el-input v-model="curItem.sort" type="number"></el-input>
                <small class="text-secondary"> <i class="fas fa-info-circle"></i> 序号大于0才会显示 , 序号越大位置越靠前 </small>
            </el-form-item>
            <el-form-item label="视频地址">
                <el-input v-model="curItem.url"></el-input>
                <small class="text-secondary"> <i class="fas fa-info-circle"></i> 请输入视频的通用代码 </small>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialog=false">取 消</el-button>

            <el-button v-if="curItem.id"  type="primary" @click=" update() ">修 改</el-button>
            <el-button v-else type="primary" @click=" add() ">添 加</el-button>
        </div>
    </el-dialog>
@{{curItem}}
@endsection
@section('script')

    <script>

        var app = new Vue({
            el: '#app',
            data: {

                serverId: $('#serverId').val(),
                tableData: [],
                curItem:null,

                dialog:false,

            },
            mounted() {
                this.getList();
            },
            methods:{

                getList(){
                    post('/manager/server/'+this.serverId+'/videoList',{},res=>{
                        console.log(res);
                        this.tableData=res.res;
                    },this)
                },
                addShow(){
                    if (this.tableData.length>=60){
                        this.$message.info('最多添加60个视频');
                        return;
                    }
                    this.curItem={};
                    this.dialog=true;
                },
                add(){
                    if (this.curItem.title){
                        if (this.curItem.url){
                            this.adddo();
                        } else {
                            this.$message.error('请输入视频地址');
                        }
                    } else {
                        this.$message.error('请输入视频名称');
                    }
                },
                adddo(){
                    post('/manager/server/'+this.serverId+'/videoAdd',this.curItem,res=>{
                        console.log(res);
                        if (res.err===0) {
                            this.$message.success('添加成功');
                            this.dialog=false;
                            this.getList();
                        }else{
                            this.$message.error(res.msg);
                        }
                    },this)
                },

                del(item){
                    this.$confirm('此操作将删除该视频, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        post('/manager/server/'+this.serverId+'/videoDel',item,res=>{
                            console.log(res);
                            if (res.err===0){
                                this.$message.success('删除成功');
                                this.getList();
                            } else{
                                this.$message.error(res.msg);
                            }
                        },this)
                    }).catch(() => {
                        // this.$message({
                        //     type: 'info',
                        //     message: '已取消删除'
                        // });
                    });
                },

                update(){
                    post('/manager/server/'+this.serverId+'/videoUpdate',this.curItem,res=>{
                        console.log(res);
                        if (res.err===0) {
                            this.$message.success('修改成功');
                            this.dialog=false;
                        }else {
                            this.$message.error(res.msg);
                        }
                    },this);
                },
                edit(item){
                    this.curItem=item;
                    this.dialog=true;
                },

            }
        });
    </script>
@endsection